<!DOCTYPE html>
<html lang="en">
<head>
  <script>
    var json;
  </script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人报告（单个量表）</title>
  <link rel="stylesheet" href="./../../style/css/reset.css">
  <link rel="stylesheet" href="./../../style/css/report.css">
  <link rel="stylesheet" href="./../../style/font-awesome-4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="./../../style/css/aSingleScale.css">
  <script src="./../../js/jquery-1.11.1.js"></script>
  <!-- <script src="./../../js/aSingleScale.js"></script> -->
  <script>
    $(function () {
      if (!json) {
        $.ajax({
          url: 'http://xinzhi_school.jsyixin.com/api/report/getReportDetails',
          beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader('token', getUrlKey('token'))
          },
          data: {
            report_id: getUrlKey('report_id'),
            sid: getUrlKey('sid')
          },
          dataType: 'json',
          ContentType: 'application/json',
          type: 'post',
          success: function (res) {
            dataFn(res)
          }
        })
      } else {
        dataFn(json)  
      }
      function dataFn (res) {
        $('.plan_title').text(res.data.surveyls_title)
        $('.school_title').text(res.data.school_title)
        // 个人信息
        $('.real_name').text(res.data.user_info.real_name)
        $('.student_id').text(res.data.user_info.student_id)
        $('.sex_name').text(res.data.user_info.sex_name)
        $('.grade_title').text(res.data.user_info.grade_title)
        $('.class_title').text(res.data.user_info.class_title)
        // 测评内容
        $('.brief_introduction').append('<p class="retract2 newlineAlignment">' + res.data.brief_introduction + '</p>')
        // 得分（刻度条）
        for (var n = 0; n <= res.data.subsection.segments; n++) {
          var width = (377.98 - (res.data.subsection.segments + 1)) / res.data.subsection.segments
          $('.subsection2').css('width', width)
          $('.subsection').append('<li class="subsection1"> <span>' + n * res.data.subsection.scale + '</span> </li> <li class="subsection2"></li>')
        }
        for (var i = 0; i < res.data.main.length; i++) {
          var a = res.data.main[i]
          // 得分
          $('.score').append('<ul> <li>' + a.dimension + '</li> <li>' + a.score + '</li> <li>' + a.high_score + '</li> <li><div class="articlePoints"><div class="articlePointsScore" style="width:' + (a.score/a.high_score)*100 + '%;background-color:' + a.color + ';"></div></div></li> </ul>')
          // 结果解释
          $('.explain').append('<div class="tittle3"> <p class="newlineAlignment"><i class="fa fa-caret-right fa-lg triangle"></i>' + a.dimension + '</p> </div> <p class="retract2 newlineAlignment">' + a.explain + '</p>')
          // 建议
          $.getJSON('http://192.168.0.23:8080/static/report/json/aSingleScale.json', function (data) {
            for (var i = 0; i < data.data.length; i++) {
              if (data.data[i].title == a.sid) {
                for (var n = 0; n < data.data[i].proposal.length; n++) {
                  if (data.data[i].proposal[n].title == a.dimension) {
                    for (var m = 0; m < data.data[i].proposal[n].proposal.length; m++) {
                      $('.proposal').append(data.data[i].proposal[n].proposal[m])
                    }
                  }
                }
              }
            }
          })
        } 
      }
      function getUrlKey (name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
        var r = window.location.search.substr(1).match(reg)
        if (r != null) return unescape(r[2]); return null
      }
    })
  </script>
</head>
<body>
  <div class="reportTitle">
    <div class="mandatoryPaging">
      <div class="tittle location_city">心理老师版</div>
      <div class="tittle school_title"></div>
      <div class="tittle plan_title"></div>
    </div>
  </div>
  <div class="reportCenter">
    <div class="mandatoryPaging">
      <div class="center">
        <div class="tittle">
          <div class="title-border fl"></div>
          <span>报告查阅须知</span>
        </div>
        <p class="retract2 bold">贵校在查看学校报告时，要做出以下承诺：</p>
        <p class="newlineAlignment"><i class="fa fa-caret-right fa-lg triangle"></i>测验报告供初步了解受测者的心理状态，仅作参考，不能作为临床诊断的依据，如需准确分析、获得帮助，请进一步咨询专业人士；</p>
        <p class="newlineAlignment"><i class="fa fa-caret-right fa-lg triangle"></i>合理看待心理测验及其结果。心理测验是了解心理状态的方法之一，且其准确性受作答时是否认真、是否如实反映情况等多种因素的影响。因此，在阅读本测验报告时，请确认受测者作答时的状态，并参照日常生活中受测者的实际情况来理解测验结果。</p>
        <p class="newlineAlignment"><i class="fa fa-caret-right fa-lg triangle"></i>禁止“贴标签”。要以发展的眼光看待测验结果，避免根据一次测验结果给受测者将其贴上作为永久的“标签”。</p>
      </div>
      <div class="center">
        <div class="tittle">
          <div class="title-border fl"></div>
          <span>人员信息</span>
        </div>
        <ul class="personnel">
          <li>姓名：<span class="real_name"></span></li>
          <li>学籍号：<span class="student_id"></span></li>
          <li>性别：<span class="sex_name"></span></li>
          <li>年级：<span class="grade_title"></span></li>
          <li>班级：<span class="class_title"></span></li>
        </ul>
      </div>
      <div class="center">
        <div class="tittle">
          <div class="title-border fl"></div>
          <span>测评得分及解释</span>
        </div>
        <div class="tittle2">
          <p class="newlineAlignment"><i class="fa fa-tag fa-lg tag"></i>测评内容</p>
        </div>
        <div class="brief_introduction"></div>
        <div class="tittle2">
          <p class="newlineAlignment"><i class="fa fa-tag fa-lg tag"></i>测评得分</p>
        </div>
        <div class="score">
          <ul>
            <li>纬度</li>
            <li>个人得分</li>
            <li>最高分</li>
            <li><ul class="subsection"></ul></li>
          </ul>
        </div>
        <div class="tittle2">
          <p class="newlineAlignment"><i class="fa fa-tag fa-lg tag"></i>结果解释</p>
        </div>
        <div class="explain"></div>
        <div class="tittle2">
          <p class="newlineAlignment"><i class="fa fa-tag fa-lg tag"></i>建议对策</p>
        </div>
        <div class="proposal"></div>
      </div>
    </div>
  </div>
</body>
</html>